<script setup>
import { cardBgColor, wallType } from '@/utils/data'
import { feedback } from "@/api/wall"
import { useUserStore } from '@/store/user'
import dayjs from 'dayjs'

const props = defineProps({
    i: Object,
    default: () => {}
})
const emit = defineEmits(['openModal'])
const userStore = useUserStore()


// 反馈
const doFeedBack = (type) => {
    const data = {
        wallId: props.i.id,
        userId: userStore.ip,
        type,
        moment: dayjs().format('YYYY/MM/DD HH:mm')
    }
    if (props.i.islike[0].count > 0) return
    feedback(data).then(res => {
        props.i.likeCount++
        props.i.islike[0].count++
    })
}

const openMessageModal = () => {
    emit('openModal')
}
</script>

<template>
    <div class="card" :style="{background: cardBgColor[i.color]}">
        <div class="header">
            <div class="date">{{ i.moment }}</div>
            <div class="type">{{ wallType[0].tag[i.label - 1]}}</div>
        </div>
        <div class="content" @click="openMessageModal">
            {{ i.message }}
        </div>
        <div class="footer">
            <div class="left">
                <span class="iconfont icon-aixin" :class="{'isLike': i.islike[0].count > 0}" @click.stop="doFeedBack(0)"></span>
                <span class="num">{{ i.likeCount }}</span>
                <span class="iconfont icon-liuyan"></span>
                <span class="num">{{ i.comcount[0].count }}</span>
            </div>
            <div class="right">{{ i.name }}</div>
        </div>
    </div>
</template>

<style lang="less" scoped>
.card {
    width: 288px;
    height: 240px;
    box-sizing: border-box;
    padding: 12px 18px;
    margin: 6px;
    border: 1px solid transparent;
    background: rgba(252, 175, 162, 0.30);
    position: relative;
    // &:hover {
    //     transform: translateY(-6px);
    //     transition: all 0.4s;
    // }
    &.active {
        border: 1px solid #3B73F0;
    }

    .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 12px;
    }

    .content {
        width: 100%;
        height: 140px;
        margin-top: 16px;
        font-size: 14px;
        line-height: 1.6;
        cursor: pointer;
        font-family: cursive;
    }

    .footer {
        font-size: 16px;
        width: 250px;
        color: #949494;
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: absolute;
        bottom: 16px;

        .left {
            display: flex;
            align-items: center;
            .iconfont {
                margin-right: 4px;
            }
            .icon-aixin {
                cursor: pointer;
                transition: all 0.3s;
                &:hover {
                    color: #f67770;
                }
            }
            .isLike {
                color: #f67770;
            }
            .num {
                font-size: 14px;
                margin-right: 12px;;
            }
        }
        .right {
            color: #202020;
        }

    }

}</style>
